<template>
  <el-tabs type="border-card" class="host-backup">
    <el-tab-pane label="主通道" type="border-card">
      <el-form :model="zhu" label-width="60px" label-position="top">
        <el-form-item label="端口类型" prop="porttype">
          <el-select v-model="zhu.porttype" size="small" placeholder="请选择端口类型" @change="dataChange">
            <el-option
              v-for="item in portTypes"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <template v-if="zhu.porttype === 1">
          <el-form-item label="协议类型" prop="tcpprtcltype">
            <el-select
              v-model="zhu.tcpprtcltype"
              size="small"
              placeholder="请选择协议类型"
              @change="dataChange"
            >
              <el-option
                v-for="item in protoTypes"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="IP地址" prop="tcpportip">
            <el-input
              v-model="zhu.tcpportip"
              size="small"
              placeholder="如: 127.0.0.1"
              @input="dataChange"
            />
          </el-form-item>
          <el-form-item label="端口号" prop="tcpport">
            <el-input v-model="zhu.tcpport" size="small" placeholder="请输入" @input="dataChange" />
          </el-form-item>
        </template>
        <template v-if="zhu.porttype === 2">
          <el-form-item label="串口号" prop="comport">
            <el-input v-model="zhu.comport" size="small" placeholder="请输入" @intpu="dataChange" />
          </el-form-item>
          <el-form-item label="波特率" prop="combaudrate">
            <el-select
              v-model="zhu.combaudrate"
              size="small"
              placeholder="请选择"
              @change="dataChange"
            >
              <el-option v-for="item in poterate" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奇偶校验" prop="comcheck">
            <el-select v-model="zhu.comcheck" size="small" placeholder="请选择" @change="dataChange">
              <el-option v-for="item in jojy" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据位" prop="comdgtlbits">
            <el-select
              v-model="zhu.comdgtlbits"
              size="small"
              placeholder="请选择"
              @change="dataChange"
            >
              <el-option v-for="item in datapos" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停止位" prop="comstopbit">
            <el-select v-model="zhu.comstopbit" size="small" placeholder="请选择" @change="dataChange">
              <el-option v-for="item in stoppos" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="备通道">
      <h4>暂不支持...</h4>
      <!-- <div class="input-row">
        <label>端口类型</label>
        <el-select v-model="bei.tcpprtcltype" size="small" placeholder="请选择通道类型">
        </el-select>
      </div>
      <div class="input-row">
        <label>协议类型</label>
        <el-select v-model="bei.tcpprtcltype" size="small" placeholder="请选择协议类型">
        </el-select>
      </div>
      <div class="input-row">
        <label>IP地址</label>
        <el-input v-model="bei.tcpportip" size="small" placeholder="如: 127.0.0.1"/>
      </div>
      <div class="input-row">
        <label>端口号</label>
        <el-input v-model="bei.tcpport" size="small" placeholder="请选择端口号"/>
      </div>-->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { cloneDeep } from "lodash";
export default {
  props: {
    hostBack: {
      type: Array,
      default() {
        return [{ tcpchnltype: 2 }, { tcpchnltype: 1 }];
      }
    }
  },
  data() {
    return {
      protoTypes: [
        { id: 1, label: "TCP服务端" },
        { id: 2, label: "TCP客户端" },
        { id: 3, label: "UDP服务端" },
        { id: 4, label: "UDP客户端" }
      ],
      portTypes: [
        // { id: 0, label: "无" },
        { id: 1, label: "tcp网口" },
        { id: 2, label: "串口" }
      ],
      poterate: [
        110,
        300,
        1200,
        2400,
        4800,
        9600,
        14400,
        19200,
        56000,
        115200,
        256000
      ],
      jojy: [
        { id: 0, label: "无校验" },
        { id: 1, label: "奇校验" },
        { id: 2, label: "偶校验" }
      ],
      datapos: [6, 7, 8],
      stoppos: [1, 1.5, 2],
      hostBackData: []
    };
  },
  computed: {
    zhu() {
      return (
        this.hostBackData.filter(e => e.tcpchnltype === 1)[0] || {
          tcpchnltype: 1
        }
      );
    },
    bei() {
      return (
        this.hostBackData.filter(e => e.tcpchnltype === 2)[0] || {
          tcpchnltype: 2
        }
      );
    }
  },
  watch: {
    hostBack: {
      deep: true,
      immediate: true,
      handler(v) {
        const data = cloneDeep(v);
        const zhu = data.filter(e => e.tcpchnltype === 1)[0] || null;
        const bei = data.filter(e => e.tcpchnltype === 2)[0] || null;
        if (!zhu) {
          data.push({ tcpchnltype: 1 });
        }
        if (!bei) {
          data.push({ tcpchnltype: 2 });
        }
        this.hostBackData = data;
      }
    }
    // hostBackData: {
    //   deep: true,
    //   handler(v) {
    //     this.$emit("change", v);
    //   }
    // }
  },
  methods: {
    dataChange() {
      this.$emit("change", this.hostBackData);
    }
  }
};
</script>

<style lang="scss" scoped>
.host-backup {
  box-shadow: 0 0 0;
}
/deep/ .el-form-item {
  margin-bottom: 10px;
}
</style>
